<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    {{--<meta name="viewport" content="width=device-width, initial-scale=1">--}}
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>eSIM中心</title>
    <script src="{{ asset('js/common.js') }}?v=202006131158" type="text/javascript"></script>
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}?v=202006131150">
    <script src="{{ asset('js/jquery.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/ewin.js') }}" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js" type="text/javascript"></script>


    <!-- Styles -->
    <style>
        .page-section {
            background: rgb(255, 255, 255);
            border: 1px solid rgb(221, 221, 221);
            margin-bottom: 1px;
            margin: 10px;
        }

        button {
            padding: 5px;
        }

        .h-title {
            padding: 10px 10px;
        }
        .h2-title {
            padding: 10px 10px;
        }
        .base-info {
            width: 72px;
            height: 32px;
            line-height: 32px;
            font-size: 16px;
            float: left;
            text-align: center;
        }

        .form-row-productName {
            width: 100%;
            margin-top: 18px;

            line-height: 32px;
            height: 50px;
        }

        .package-title {
            display: -webkit-box;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .base-info input {
            font-size: 16px;
        }

        .form-status-content {
            width: 100%;
            line-height: 32px;
        }

        .form-status-content .status {
            height: 32px;
            width: 220px;
            font-size: 16px;
            line-height: 32px;
            margin-left: 10px;
        }

        .form-status-content .detail {
            color: #2db7f5;
            text-align: center;
            font-size: 16px;
            margin-left: 50px;
            width: 140px;
            height: 32px;
            padding: 5px;
            /* float: right; */
            line-height: 20px;
        }

        .account-input input {
            font-size: 16px;
            height: 32px;
            width: 60%;
        }

        .zone_name {
            font-weight: bold;
        }

        .nav li a {
            color: #000000;
        }

        .zone_items {
            font-size: 16px;
            flex-wrap: wrap;
            margin: 10px 0 10px 10px;
        }
        .address_items {
            font-size: 16px;
            flex-wrap: wrap;
            margin: 10px 0 10px 0px;
            border:1px solid #ddd;
            padding: 10px;
        }
        .zone_items .zone_item {
            padding: 5px;
            border: 1px dashed #b0b0b0;
            margin-right: 5px;
            display: inline-block;
        }

        .zone_items .active {
            border: 1px solid #ff6700;
            color: #ff6700 !important;
        }

        .item-ans {
            width: 100%;
            font-size: 16px;
            justify-content: space-between;
            box-sizing: border-box;
            height: 100px;
            align-items: center;
            border-bottom: 1px solid #ddd;
        }

        .product-info {
            width: 100%;
            -webkit-box-pack: justify;
            margin: 0.3rem;
            box-sizing: border-box;
            height: 180px;
            line-height: 180px;
        }

        .product-name {

            display: block;
            /*内联对象需加*/
            white-space: nowrap;
            /* 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。不换行 */
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            float: left;
            line-height: 39px;
            /* 不换行 */
            -webkit-box-orient: vertical;
            margin-left: 10px;
        }

        .product-price {
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
            border-radius: 60px;
            border: 1px solid #FF6A00;
            color: #FF6A00;
            float: right;
            /*margin-right: 34px;*/
            margin-top: 4px;
        }

        .buy-info-product view {
            width: 615px;
            margin-left: 40px;
            float: left;

            text-overflow: ellipsis;
            overflow: hidden;
        }

        .buy-info-money view {
            float: left;

            margin-left: 40px;
        }

        #myTab {
            font-size: 16px;
            margin: 0 10px;
        }

        label {
            font-weight: normal;
        }

        .radio_type {
            width: 20px;
            height: 20px;
            appearance: none;
            position: relative;
            float: left;
            top: 4px;
        }

        .radio_type:before {
            content: '';
            width: 20px;
            height: 20px;
            /*border: 1px solid #7d7d7d;*/
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
        }

        .radio_type:checked:before {
            content: '';
            width: 20px;
            height: 20px;
            background: #FF6A00;
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
        }

        .radio_type:checked:after {
            content: '';
            width: 10px;
            height: 5px;
            border: 2px solid white;
            border-top: transparent;
            border-right: transparent;
            text-align: center;
            display: block;
            position: absolute;
            top: 6px;
            left: 5px;
            vertical-align: middle;
            transform: rotate(-45deg);
        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
            border-bottom: 1px solid #FF6A00;
            border-top: none !important;
            border-left: none !important;
            border-right: none !important;

            color: #ff6700 !important;
        }

        .nav-tabs > li {
            display: block;
            float: left;
            height: 40px;
        }

        .tab-pane ul {
            list-style: none;
        }

        .nav-tabs > li > a {
            border-radius: 0px !important;
            padding: 8px 15px;
        }

        .nav > li > a:focus, .nav > li > a:hover {
            background: #FFF !important;
        }

        .tab-content {
            min-height: 180px;
            overflow-y: scroll;
        }

        #buyButton {
            width: 95%;
            margin: 10px;
            border: none;
            background: #FF6A00;
            color: #ffffff;
            height: 50px;
            line-height: 25px;
        }

        .product-list {
            float: left;
            width: 100%;
            height: 50px;
            margin-left: -20px;
            margin-top: 10px;
            border-bottom: 1px solid #ddd;
        }

        /*.zone-select,.package-select{*/
        /*display: none;*/
        /*}*/

        .support-content{
            border: 1px solid #ddd;
        }
        .support-way{
            padding: 10px;
            margin-bottom: 20px;
            width: 100%;
            height: 35px;
            line-height: 35px;
        }
        .support-way input{
            margin-right: 10px;
        }
        #code{margin-top:20px}
        #code table{margin: 0 auto;}
    </style>
</head>
<body>
<div>
    <div class="page">
        <form>

            <div class="page-section" style="min-height:180px;">
                <div class="page-section zone-select zone-recharge">
                    <div class="zone_name h-title">地区选择</div>
                    {{--<a href="javascript:void(0)" onclick="getMore('all')" class="more-class"  data-icon="grid" style="float: right;z-index: 1;display: inline-block;position: relative;margin: -30px 10px;">更多</a>--}}
                    <div class="zone_items"  style="min-height: 90px">
                    </div>
                </div>
                <div class="page-section package-select package-recharge" style="display: none;">
                    <div class="zone_name h-title">套餐选择</div>
                    <div title="点击跳转到充值中心" style="text-align: center;"><a href="{{$configData['path_url']}}/api/recharge" >(eSIM套餐用完均可充值重复使用，更优惠)</a></div>
                    <div class="tab-product" style="padding:5px 0 20px 0;border-bottom: 1px solid #ddd;min-height: 90px">
                        <ul class="nav nav-tabs" id="myTab">
                        </ul>
                        {{--<div class="dropdown" style="margin: 10px;">--}}
                            {{--<button class="btn- btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="border: none;">--}}
                                {{--排序--}}
                                {{--<span class="caret"></span>--}}
                            {{--</button>--}}
                            {{--<ul class="dropdown-menu"  id="ddmenu" style="margin-top: -1px;min-width: 100px !important;">--}}
                                {{--<li><a href="#">默认排序</a></li>--}}
                                {{--<li><a href="#">按价格降序</a></li>--}}
                                {{--<li><a href="#">按价格升序</a></li>--}}
                            {{--</ul>--}}
                        {{--</div>--}}
                        <div class="tab-content">
                        </div>
                    </div>
                    {{--<div class="page-section"><input type="button" id="buyButton" name="submit" value="立即购买"></div>--}}
                </div>
            </div>
        </form>
    </div>
</div>
<!-- loading -->
<div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop='static'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                正在加载，请稍候...<span id="result"></span>
            </div>
        </div>
    </div>
</div>
<!--模态框组件-->
<div class="modal fade" id="myModal" style="margin-top: 50px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>提示</h3>
            </div>
            <div class="modal-body">
                <p id="message-content"></p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-info" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--模态框组件-->
<div class="modal fade" id="buy-loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop='static'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                正在购买，请稍候...<span id="result"></span>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="mailingAddress" style="margin-top: 50px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>提示</h3>
            </div>
            <div class="modal-body">
                {{--<label for="name" class="zone_name h2-title">套餐支持：</label>--}}
                {{--<div class="support-content">--}}
                    {{--<div class="support-way">--}}
                        {{--<label> <input type="radio" class="radio_type" name="optionsRadios" value="1">esim</label>--}}
                    {{--</div>--}}
                    {{--<div class="support-way">--}}
                        {{--<label><input type="radio"  class="radio_type"  name="optionsRadios" value="2">邮寄</label>--}}
                    {{--</div>--}}
                {{--</div>--}}
                <div class="esim-content" style="height: 230px;">
                    <div class="title">已生成二维码，请扫一扫</div>
                    <div id="code"></div>
                    <img id='imgOne' style="width: 170px;height: 170px;margin: 10px 82px 30px 90px;"/>
                </div>
                {{--<div class="address-content" style="height: 230px;padding-top: 20px;display: none">--}}
                    {{--<div type="button" id="select-address"><span style="color:#005ea7">选择邮寄地址</span></div>--}}
                {{--</div>--}}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="over-submit">完成
                </button>
            </div>
        </div>
    </div>

</div>
 <div id="alert"></div>
</body>
</html>
<script>

    wx.config({
        debug: false,
        appId: '{{$configData['appId']}}',
        timestamp: '{{$configData['timestamp']}}',
        nonceStr: '{{$configData['nonceStr']}}',
        signature: '{{$configData['signature']}}',
        jsApiList: [
            'checkJsApi',
            'openAddress'
        ]
    });
    getZoneList('all',1);
    var openid = '{{$configData['openid']}}';
    function productByBuy(){
        if ($("input[type='radio']:checked").length == 0) {
            $("#message-content").text("请选择套餐...");
            $("#myModal").modal();
            return;
        }
        var product_name = $("input[type='radio']:checked").siblings('.product-name').text();
        var product_price = $("input[type='radio']:checked").siblings('.product-price').text();
        var zones_str = $("input[type='radio']:checked").siblings("input[name='zones_str']").val();
        var valid_days = $('#myTab .active>a').text().match(/\d+/)[0];
        Ewin.confirm({
            message: '<p style="font-weight: bold">请确认提交信息：</p>' +
            '<p><span class="confirm-title">套餐名：</span><span style="color: #ff6a00;">' + product_name + '</span></p><p><span class="confirm-title"> 金额：</span><span style="color: #ff6a00;">' + product_price + '</span></p>' +
            '<p><span class="confirm-title">天数：</span>'+valid_days+'天</p>'+
            '<p><span class="confirm-title">通用地区：</span>'+zones_str+'</p>'
        }).on(function (e) {
            if (!e) {
                //点击取消按钮
                return;
            } else {
                if (!e) {
                    return;
                }
                if (typeof WeixinJSBridge == "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                    }
                } else {
                    onBridgeReady();
                }
            }
        });
    }
    function onBridgeReady() {
        var out_trade_no = '';
        $.ajax({
            type: "get",
            url: URL + '/tradeNo',
            success: function (res) {
                out_trade_no = res.out_trade_no;
                var product_name = $("input[type='radio']:checked").siblings('.product-name').text();
                var product_price = $("input[type='radio']:checked").siblings('.product-price').text();
                var productId = $("input[type='radio']:checked").val();
                var provider = $("input[type='radio']:checked").siblings("input[name='provider_type']").val();
                var i_valid_days = $('#myTab .active>a').text().match(/\d+/)[0];
                var total_fee = parseInt(product_price * 100);
                if(!productId){
                    return;
                }
                var body = 'SCT购买';
                $.ajax({
                    type: "post",
                    url: URL + '/createOrder',
                    data: {
                        out_trade_no: out_trade_no,
                        total_fee: total_fee,
                        body: body,
                        openid: openid,
                        vc_product_name:product_name,
                        i_valid_days:i_valid_days,
                        i_product_id:productId,
                        product_price:product_price,
                        type:2,
                        provider:provider
                    },
                    success: function (data) {
                        var order = data.jsApiParameters;
                        var out_trade_no = data.order;
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                                "appId": order.appId,     //公众号名称，由商户传入
                                "timeStamp": order.timeStamp, //时间戳，自1970年以来的秒数
                                "nonceStr": order.nonceStr, //随机串
                                "package": order.package,
                                "signType": "MD5",         //微信签名方式：
                                "paySign": order.paySign  //微信签名
                            },
                            function (res) {
                                if (res.err_msg == "get_brand_wcpay_request:ok") {
                                    // 使用以上方式判断前端返回,微信团队郑重提示：
                                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                    payResult(out_trade_no);
                                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                                    $("#message-content").text("购买已取消");
                                    $("#myModal").modal();
                                } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                                    $("#message-content").text("购买失败，请联系客服");
                                    $("#myModal").modal();
                                }
                            });
                    },
                    error: function () {

                    },
                    complete: function () {

                    }
                });
            },
            error: function () {
                $("#message-content").text("下单失败，请联系客服");
                $("#myModal").modal();
                return;
            }
        });

    }
    function payResult(orderId) {
        $.ajax({
            type: "get",
            url: URL + '/payResult',
            data: {"order_id": orderId},
            success: function (res) {
                if(res.trade_state=='SUCCESS'){
                    buySim(orderId);
                }
            },
            error: function () {
            }
        });
    }
    function buySim(orderId) {
        $('#buy-loading').modal('show');
        $.ajax({
            type: "post",
            url: URL + '/buySim',
            data: {"order_id": orderId},
            success: function (c) {
                if (c.success==true) {
                    var account = c.account;
                    setTimeout(function () {
                        $('#buy-loading').modal('hide');
                    }, 5000);
                    Ewin.alert({message: '<span style="color:#2db7f5;font-weight: bolder;">购买成功</span>'}).on(function (e) {
                        //点击确定按钮
                        if (e) {
                            $("#mailingAddress").modal();
                            $('.esim-content').css('display', 'block');
                            $("#code").empty();
                            var url = c.url;
                            // var content = toUtf8(url);
                            // var qrcode = $('#code').qrcode(content).hide();
                            // var canvas = qrcode.find('canvas').get(0);
                            $('#imgOne').attr('src', url);
                            $('#over-submit').click(function (e) {
                                $(location).attr('href', URL + '/recharge?action=detail&account=' + account);
                            });
                        }
                    });
                } else {
                    $('#buy-loading').modal('hide');
                    var msg = '<span style="color:red;font-weight: bolder;">购买失败</span>';
                    if(c.msg=='The product does not exist'){
                        msg += '：套餐参数错误，请联系客服 !';
                    } else if(c.msg=='Out of stock') {
                        msg += '：资源不足，请联系客服 !';
                    }
                    $("#message-content").empty();
                    $("#message-content").append(msg);
                    $("#myModal").modal();
                }
            }
            ,error: function () {
                $('#buy-loading').modal('hide');
                var msg = '<span style="color:red;font-weight: bolder;">请求购买失败，请联系客服</span>';
                $("#message-content").empty();
                $("#message-content").append(msg);
                $("#myModal").modal();
            }
        });
    }
    $("#ddbtn").mouseenter(function () {
        $(this).dropdown("toggle");
    }).mouseleave(function () {
        $(this).dropdown("toggle");
    });
    $("#ddmenu").mouseenter(function () {
        $("#ddbtn").dropdown("toggle");
    }).mouseleave(function () {
        $("#ddbtn").dropdown("toggle");
    });

    function getMore(type) {
        if(type=='all'){
            $('.more-class').html(
                `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
            );
            setTimeout(function () {
                zoneFun(zoneAll, 1, products);
                $('.more-class').html(
                    '更多'
                );
            },2000);
        }
    }
    $('#ddmenu>li').each(function (index) {
        $(this).click(function () {
            //默认排序
            if(index==0){
                $('.tab-product .tab-content .active').empty();
                $('.tab-product .tab-content .active').append('<ul></ul>');
                for(let i=0;i<defaultArray.length;i++){
                    $('.tab-product .tab-content .active>ul').append(defaultArray[i])
                }
                return;
            }
            //降序排序
            else if(index==1){
                for(let i=0;i<array.length;i++){
                    for (let j=0;j<array.length-i-1;j++){
                        prev = array[j].find('.product-price').html();
                        after = array[j+1].find('.product-price').html();
                        if(parseFloat(prev) < parseFloat(after)){
                            let temp = array[j+1];
                            array[j+1]=array[j];
                            array[j]=temp;
                        }
                    }
                }
            }
            //升序排序
            else if(index==2){
                for(let i=0;i<array.length;i++){
                    for (let j=0;j<array.length-i-1;j++){
                        prev = parseFloat(array[j].find('.product-price').html()).toFixed(2);
                        after = parseFloat(array[j+1].find('.product-price').html()).toFixed(2);
                        if(parseFloat(prev) > parseFloat(after)){
                            let temp = array[j+1];
                            array[j+1]=array[j];
                            array[j]=temp;
                        }
                    }
                }
            }
            //清空原本列表，将排序的商品数组添加上去
            $('.tab-product .tab-content .active').empty();
            $('.tab-product .tab-content .active').append('<ul></ul>');
            for(let i=0;i<array.length;i++){
                $('.tab-product .tab-content .active>ul').append(array[i])
            }
            $('.product-list').click(function (e) {
                $('.product-list').children('.radio_type').prop('checked', false);
                $(this).children('.radio_type').prop('checked', true);
            });
        })
    });
    // function address_open(){
    //     wx.openAddress({
    //         success: function (res) {
    //             // console.log(res);
    //             $("#select-address").empty();
    //             $("#select-address").append('<div class="zone_name h2-title">邮寄地址：<div class="edit-address-content" style="float:right;color:#005ea7">更改</div></div> <div class="address_items"><div style="width: 100%;height: 30px;line-height: 30px;">'
    //                 + '<span id="userName">收货人：' + res.userName + '</span></div>'
    //                 + '<div><span id="telNumber">电话：' + res.telNumber + '</span></div>'
    //                 + '<div><span id="postalCode">邮编：' + res.postalCode + '</span></div>'
    //                 + '<div style="width: 100%;height: auto;line-height: 30px;">详细地址：'
    //                 + '<span id="provinceName">' + res.provinceName + '</span>'
    //                 + '<span id="cityName">' + res.cityName + '</span>'
    //                 + '<span id="countryName">' + res.countryName + '</span>'
    //                 + '<span id="detailInfo">' + res.detailInfo + '</span>'
    //                 + '</div></div>');
    //         },
    //         cancel: function (errMsg) {
    //             // 用户取消拉出地址 //
    //             //alert(errMsg);
    //         }
    //     });
    // }

    // $('.edit-address-content').click(function () {
    //     address_open();
    // });
    // $(".support-way .radio_type").click(function(){
    //     if($("input[name='optionsRadios']:checked").val()==1){
    //         $('.esim-content').css('display','block');
    //         $('.address-content').css('display','none');
    //         $("#code").empty();
    //         var url = 'http://www.baidu.com';
    //         var content = toUtf8(url);
    //         var qrcode= $('#code').qrcode(content).hide();
    //         // $("#code").qrcode({
    //         //     render: "table",
    //         //     width: 150,
    //         //     height:150,
    //         //     text: content
    //         // });
    //         var canvas=qrcode.find('canvas').get(0);
    //         $('#imgOne').attr('src',canvas.toDataURL('image/jpg'));
    //     } else {
    //         $('.address-content').css('display','block');
    //         $('.esim-content').css('display','none');
    //     }
    // });

</script>

